<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>确认订单</span>
        </div>
      </template>

      <div class="order-section">
        <h3>收货地址</h3>
        <div class="address-list" v-if="addressList.length > 0">
          <el-radio-group v-model="selectedAddress">
            <div v-for="address in addressList" :key="address.id" class="address-item">
              <el-radio :label="address.id">
                <div class="address-content">
                  <div class="address-info">
                    <span class="name">{{ address.name }}</span>
                    <span class="phone">{{ address.phone }}</span>
                  </div>
                  <div class="address-detail">
                    {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}
                  </div>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </div>
        <div v-else class="no-address">
          <el-button type="primary" @click="handleAddAddress">添加收货地址</el-button>
        </div>
      </div>

      <div class="order-section">
        <h3>商品信息</h3>
        <el-table :data="orderItems" style="width: 100%">
          <el-table-column label="商品图片" width="120">
            <template #default="scope">
              <el-image 
                style="width: 80px; height: 80px"
                :src="scope.row.productImage"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="price" label="单价" width="120">
            <template #default="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="120" />
          <el-table-column label="小计" width="120">
            <template #default="scope">
              ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="order-section">
        <h3>订单备注</h3>
        <el-input
          v-model="remark"
          type="textarea"
          :rows="2"
          placeholder="请输入订单备注（选填）"
        />
      </div>

      <div class="order-footer">
        <div class="price-info">
          <span>共 {{ totalQuantity }} 件商品，</span>
          <span>合计：<span class="price">¥{{ totalPrice.toFixed(2) }}</span></span>
        </div>
        <div class="actions">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            提交订单
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const submitting = ref(false)
const selectedAddress = ref(null)
const remark = ref('')
const addressList = ref([])
const orderItems = ref([])

// 计算总数量
const totalQuantity = computed(() => {
  return orderItems.value.reduce((total, item) => total + item.quantity, 0)
})

// 计算总价
const totalPrice = computed(() => {
  return orderItems.value.reduce((total, item) => {
    return total + item.price * item.quantity
  }, 0)
})

// 添加收货地址
const handleAddAddress = () => {
  // TODO: 跳转到添加地址页面或打开添加地址对话框
}

// 取消订单
const handleCancel = () => {
  router.back()
}

// 提交订单
const handleSubmit = async () => {
  if (!selectedAddress.value) {
    ElMessage.warning('请选择收货地址')
    return
  }

  submitting.value = true
  try {
    // TODO: 调用后端接口提交订单
    ElMessage.success('订单提交成功')
    router.push('/mall/order/pay/123') // 跳转到支付页面，这里的123是示例订单ID
  } catch (error) {
    console.error('提交订单失败:', error)
    ElMessage.error('提交订单失败')
  } finally {
    submitting.value = false
  }
}

// 初始化
const initData = async () => {
  try {
    // TODO: 获取收货地址列表
    // TODO: 获取待下单商品列表
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('加载数据失败')
  }
}

initData()
</script>

<style scoped>
.order-section {
  margin-bottom: 30px;
}

.order-section h3 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: bold;
}

.address-list {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.address-item {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.address-item:last-child {
  border-bottom: none;
}

.address-content {
  margin-left: 30px;
}

.address-info {
  margin-bottom: 5px;
}

.address-info .name {
  font-weight: bold;
  margin-right: 20px;
}

.address-info .phone {
  color: #666;
}

.address-detail {
  color: #666;
}

.no-address {
  text-align: center;
  padding: 30px;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.price-info {
  margin-right: 20px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10px;
}
</style> 